<div id="app" *ngIf="userInfo" style="height: 100%;">
  <nz-page-header (nzBack)="backToHome()" nzBackIcon nzTitle="个人信息" nzSubtitle="">
    <nz-page-header-extra>
      <button nz-button nzType="primary" (click)="back()">注销</button>
    </nz-page-header-extra>
  </nz-page-header>
  <div class="main-wrapper">
    <div class="navbar-bg row"></div>
    <div class="align-content-center col-12" style="min-height: 532px;background-color: #f4f6f9;">
      <section class="section" >
        <div class="section-header">
          <h1>用户中心</h1>
          <div class="section-header-breadcrumb row">
            <div class="float-left"><strong>{{userInfo.data.user_name}}</strong>
              <nz-tag class="ml-1" [nzColor]="'#f50'">{{vipInfo}}</nz-tag>
            </div>
            <button style="float: right;position:absolute;right:26px;" nz-button nzType="primary"
                    (click)="sign()">{{signButtonText}}</button>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-12">
            <div class="card card-statistic-2">
              <div class="card-icon shadow-primary bg-primary">
                <i class="fa fa-fw fa-university"></i>
              </div>
              <div class="card-wrap">
                <div class="card-header">
                  <h4>到期时间</h4>
                </div>
                <div class="card-body">
                  <span class="counter mt-2">{{userInfo.data.expire_in.split(' ')[0]}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12">
            <div class="card card-statistic-2">
              <div class="card-icon shadow-success bg-success">
                <i class="fa fa-tint"></i>
              </div>
              <div class="card-wrap">
                <div class="card-header">
                  <h4>可用流量</h4>
                </div>
                <div class="card-body">
                  <span class="counter">{{userInfo.data.trafficInfo.enableUseTraffic}}</span>
                </div>
                <div class="card-stats">
                  <div class="card-stats-title" style="padding-top: 0;padding-bottom: 4px;">
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb">
                        <li class="breadcrumb-item active" aria-current="page">今日已用: {{userInfo.data.trafficInfo.todayUsedTraffic}}</li>
                      </ol>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12">
            <div class="card card-statistic-2">
              <div class="card-icon shadow-info bg-info">
                <i class="fa fa-fw fa-map-marker"></i>
              </div>
              <div class="card-wrap">
                <div class="card-header">
                  <h4>在线设备数</h4>
                </div>
                <div class="card-body">
                  <span class="counter">{{userInfo.data.node_connector}}</span> / <span class="counterup">1</span>                      </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12">
            <div class="card card-statistic-2">
              <div class="card-icon shadow-warning bg-warning">
                <i class="fa fa-fw fa-money"></i>
              </div>
              <div class="card-wrap">
                <div class="card-header">
                  <h4>钱包余额</h4>
                </div>
                <div class="card-body">
                  ¥ <span class="counter">{{userInfo.data.money}}</span>
                </div>
                <div class="card-stats row">
                    <div  nz-col nzSpan="12" class="pl-4">
                      <button class="float-left" nz-button nzType="primary" (click)="charge()">充值</button>
                    </div>
                    <div  nz-col nzSpan="12" class="pr-4">
                      <button class="float-right" nz-button nzType="primary" (click)="getInterCode()">获取邀请码</button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </section>
    </div>
  </div>
</div>
